<template>
	<view class="changePage">
		<view class="tab">
			<view><text :class="act == 1 ? 'active' : ''" @tap="tabBtn('1')">编辑</text></view>
			<view><text :class="act == 2 ? 'active' : ''" @tap="tabBtn('2')">预览</text></view>
		</view>
		<!-- 内容 编辑 -->
		<view v-show="showEdit">
			<view class="content">
				<view class="imgs">
					<i class="iconfont iconguanbi"></i>
					<image src="../../static/1.jpg"></image>
				</view>
				<view class="imgs">
					<i class="iconfont iconguanbi"></i>
					<image src="../../static/1.jpg"></image>
				</view>
				<view class="imgs">
					<i class="iconfont iconguanbi"></i>
					<image src="../../static/1.jpg"></image>
				</view>
				<view class="imgs">
					<i class="iconfont iconguanbi"></i>
					<image src="../../static/1.jpg"></image>
				</view>
				<view class="imgs">
					<i class="iconfont iconguanbi"></i>
					<image src="../../static/1.jpg"></image>
				</view>
				<view class="imgs">
					<i class="iconfont iconguanbi"></i>
					<image src="../../static/1.jpg"></image>
				</view>
				<view class="imgs">
					<i class="iconfont iconguanbi"></i>
					<image src="../../static/1.jpg"></image>
				</view>

				<view class="imgs">
					<i class="iconfont iconjiahao"></i>
					<image src="../../static/jiahao.png"></image>
				</view>
				<view class="imgs">
					<i class="iconfont iconjiahao"></i>
					<image src="../../static/jiahao.png"></image>
				</view>
			</view>
			<!-- 输入信息 -->
			<view class="infoIpt">
				<van-cell-group><van-field v-model="value" label="个性签名：" placeholder="请输入用户名" /></van-cell-group>
				<view class="txt">请勿在个人中心添加社交媒体用户信息</view>
				<van-cell-group><van-field v-model="value" label="职位：" placeholder="请输入用户名" /></van-cell-group>
				<van-cell-group><van-field v-model="value" label="公司：" placeholder="请输入用户名" /></van-cell-group>
				<view class="second" @tap="openModel">
					<view class="sec_one age">居住地:</view>
					<view class="sec_two">
						<text>请选择居住地</text>
						<i class="iconfont iconiconfontjiantou2"></i>
					</view>
				</view>
				<view class="second" @tap="showPopup">
					<view class="sec_one age">性别:</view>
					<view class="sec_two">
						<text>{{ sex }}</text>
						<i class="iconfont iconiconfontjiantou2"></i>
					</view>
				</view>
				<view class="second" @tap="showPopups">
					<view class="sec_one age">年龄:</view>
					<view class="sec_two">
						<text>{{ ageNum }}</text>
						<i class="iconfont iconiconfontjiantou2"></i>
					</view>
				</view>
				<view class="bottom">
					<view class="foot">
						<view>不显示我的年龄：</view>
						<switch checked color="#00cb48" style="transform: scale(0.8,0.8)" />
					</view>
					<view class="foot">
						<view>不显示我的距离：</view>
						<switch checked color="#00cb48" style="transform: scale(0.8,0.8)" />
					</view>
				</view>
			</view>
			<!-- 弹出层 -->
			<view class="showModel">
				<van-popup :show="show" position="bottom" custom-style="height:15%" @click-overlay="onClose()">
					<view class="animate">
						<view @tap="secletMan('男')">男</view>
						<view @tap="secletMan('女')">女</view>
					</view>
				</van-popup>
				<van-popup :show="shows" position="bottom" custom-style="height:30%" @click-overlay="onClose()">
					<view class="animate">
						<view v-for="(item, index) in sexArr" :key="index" @tap="secletAge(item)">{{ item }}</view>
					</view>
				</van-popup>
			</view>
			<!-- <view class="cityModel" v-show="showCity">
				<view class="city_top" @tap="closeModel"></view>
				<view class="cityList">
					<view class="child">
						<view>请选择省份</view>
						<view v-for="(item, index) in sexArr" :key="index">{{ item }}</view>
					</view>
					<view class="child">
						<view>请选择城市</view>
						<view v-for="(item, index) in sexArr" :key="index">{{ item }}</view>
					</view>
					<view class="child">
						<view>请选择街道</view>
						<view v-for="(item, index) in sexArr" :key="index">{{ item }}</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 预览内容 -->
		<view class="preview" v-show="!showEdit">
			<view class="beauty">
				<image src="../../static/1.jpg"></image>
				<view class="info">
					<i class='iconfont icontupian'></i>
					<text>3</text>	
				</view>
			</view>
		   <view class="beautyInfo">
			   <view class="left">
				  <view class="shang">
					  <text>王美丽</text>
					  <i class='iconfont iconnv'></i>
					  <text>18岁</text>
				  </view>
				  <view class="xia">
					  毕业于北京理工大学,在校期间毕业于北京理工大学,在校期间毕业于北京理工大学,在校期间
				  </view>
			   </view>
			   <view class="right" @tap="goInfoDetail">
				   <image src="../../static/top.png"></image>
			   </view>
		   </view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			act: 1,
			value: '',
			sex: '男',
			checked: true,
			shows: false,
			show: false,
			sexArr: [],
			ageNum: 18,
			showCity: false,
			showEdit:true
		};
	},
	onLoad() {
		for (var i = 18; i < 101; i++) {
			this.sexArr.push(i);
		}
	},
	methods: {
		tabBtn(num) {
			this.act = num;
			this.showEdit=!this.showEdit;
			
		},
		showPopup() {
			this.show = true;
		},
		onClose() {
			this.show = false;
			this.shows = false;
		},
		secletMan(val) {
			this.sex = val;
			this.show = false;
		},
		showPopups() {
			this.shows = true;
		},
		secletAge(val) {
			this.ageNum = val;
			this.shows = false;
		},
		//三级联动
		closeModel() {
			this.showCity = false;
		},
		openModel() {
			uni.navigateTo({
				url:"/pages/indexBar/indexBar"
			})
		},
		goInfoDetail (){
			uni.navigateTo({
				url:'/pages/chanInfoDetail/chanInfoDetail'
			})
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background-color: #f5f5f5;
	position: relative;
}
.changePage {
	width: 100%;
	.tab {
		width: 100%;
		display: flex;
		padding: 30rpx 0 0 0;
		box-sizing: border-box;
		view {
			width: 50%;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			display: flex;
			&:nth-child(1) {
				justify-content: flex-end;
				margin-right: 50px;
			}
			.active {
				color: #666eec;
				border-bottom: 2px solid #666eec;
				padding-bottom: 25rpx;
			}
		}
	}
	// 内容
	.content {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 5rpx;
		box-sizing: border-box;
		.imgs {
			width: 242rpx;
			height: 242rpx;
			position: relative;
			flex-shrink: 0;
			margin-bottom: 10rpx;
			image {
				width: 240rpx;
				height: 240rpx;
			}
			.iconguanbi {
				z-index: 2;
				position: absolute;
				top: 7rpx;
				right: 10rpx;
				font-size: 35rpx;
				color: #fc6262;
			}
			.iconjiahao {
				z-index: 2;
				position: absolute;
				top: 7rpx;
				right: 10rpx;
				font-size: 40rpx;
				color: #1297fb;
			}
		}
	}
	.infoIpt {
		margin-top: 40rpx;
		.txt {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			padding: 20rpx 20rpx 20rpx 30rpx;
			box-sizing: border-box;
		}
		.second {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 88rpx;
			border-bottom: 1px solid #eee;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			.sec_one {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				flex-shrink: 0;
				width: 150rpx;
			}
			.sec_two {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);
					margin-left: 30rpx;
				}
			}
		}
		.bottom {
			width: 100%;
			background-color: #fff;
			margin: 20rpx 0;
			.foot {
				display: flex;
				justify-content: space-between;
				padding: 0 15rpx 0 30rpx;
				height: 88rpx;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);
			}
		}
	}
	.showModel {
		width: 100%;
		.animate {
			font-size: 36rpx;
			color: #666;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			view {
				padding: 20rpx 0;
				box-sizing: border-box;
			}
		}
	}
	.cityModel {
		width: 100%;
		height: 1334rpx;
		position: absolute;
		z-index: 10;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		.city_top {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 30%;
			background-color: rgba(0, 0, 0, 0.5);
		}
		.cityList {
			display: flex;
			justify-content: space-between;
			height: 100%;
			width: 100%;
			position: absolute;
			top: 70%;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #fff;
			padding: 10rpx 0;
			box-sizing: border-box;
			.child {
				display: flex;
				width: 33%;
				text-align: center;
				font-size: 30rpx;
				color: #666;
				flex-direction: column;
				overflow-y: scroll;
				height: 30%;
				view {
					padding: 10rpx 0;
					height: 100%;
				}
			}
		}
	}
	//预览内容
	.preview{
		width: 100%;
		background-color: #fff;
	   .beauty{
		   width: 100%;
		   height: 860rpx;
		   position: relative;
		   image{
			   width: 100%;
			   height: 100%;
		    }
		 .info{
			 position: absolute;
			 top:30rpx;
			 right:30rpx;
			 z-index: 20;
			 width:82rpx;
			 height:48rpx;
			 background:rgba(0,0,0,1);
			 opacity:0.4;
			 border-radius:10rpx;
			 text-align: center;
			 line-height: 48rpx;
			i{
				font-size: 30rpx;
				color: #fff;
			} 
			text{
				font-size: 28rpx;
				color:#fff;
				margin-left: 10rpx;
			}
		 }	
		   	
	   }
	   .beautyInfo{
		   display: flex;
		   justify-content: space-between;
		   align-items: center;
		   padding: 40rpx 40rpx 30rpx 30rpx;
		   box-sizing: border-box;
		   .left{
			   flex-shrink: 0;
			   width: 60%;
			   overflow: hidden;
			   text-overflow:ellipsis;
			   white-space: nowrap;
			.shang{
				text{
					&:nth-child(1){
						font-size:36rpx;
						font-family:PingFang SC;
						font-weight:600;
						color:rgba(51,51,51,1);
					}
					&:nth-child(3){
						font-size:28rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(102,102,102,1);
						
					}
				}
				i{
					color:#ffb3b3;
					font-size: 30rpx;
					margin-left: 10rpx;
					margin-right: 10rpx;
				}
			}  
			 .xia{
				 font-size:24rpx;
				 font-family:PingFang SC;
				 font-weight:400;
				 color:rgba(153,153,153,1);
				 margin-top:15rpx;
			 }
			   
		   }
		   .right{
			   width: 60rpx;
			   height: 60rpx;
			   border-radius: 50%;
			   overflow: hidden;
			   image{
				   width: 100%;
				   height: 100%;
				   border-radius:50% ;
			   }
		   }
	   }
	 }	
		
}
</style>
